<template>
	<view class="wode__page">
		<view class="top__group">
			<image class="avatar__item" :src="avatar"></image>
			<view v-if="!nickname" class="btn__group">
				<button v-if="action==1" class="btn__item" open-type="getUserInfo" @click="loginBtnClickHandler(2)">授权小程序登录</button>
				<button v-if="action==2" class="btn__item" open-type="getUserInfo" @click="loginBtnClickHandler(1)">登录</button>
			</view>
			<view v-if="nickname" class="btn__group">{{nickname}}</view>
		</view>
		<view class="btm__group">
			<view class="item" @click="pageJump('/pages/userinfo/userinfo')"> </view>
			<view class="item"> </view>
			<view class="item" @click="pageJump('/pages/fankui/fankui')"> </view>
		</view>
		<view class="copyright">&copy; 有安米互动</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 1,
				userId: null,
				userInfo: null
			}
		},
		computed: {
			avatar() {
				const defaultAvatar = 'https://miva-unmcc.oss-cn-beijing.aliyuncs.com/avatar.png';
				return this.userInfo ? (this.userInfo.avatarUrl || defaultAvatar) : defaultAvatar;
			},
			nickname() {
				return this.userInfo ? (this.userInfo.nickName || false) : false;
			}
		},
		mounted() {
			this.userId = uni.getStorageSync('userId');
			if (this.userId) {
				this.getUserInfoAPI(this.userId); //获取用户信息
			}
		},
		methods: {
			pageJump(url) {
				uni.navigateTo({
					url
				})
			},
			async loginBtnClickHandler(action) {
				this.action = action;
				if (action == 1) {
					uni.showLoading({
						title: '登录中...',
						mask: true
					})
				}
				if (action == 2) {
					uni.showToast({
						title: '授权中...'
					})
				}
				try {
					const loginParams = await this.formatLoginParams(); // 整理登录参数
					const loginResult = await this.loginAPI(loginParams); // 调用登录接口
					getApp().globalData.userId = loginResult.id; // 把用户id存入全局变量
					uni.setStorageSync('userId', loginResult.id); // 把用户id存入缓存
					this.userId = loginResult.id;
					const userInfo = await this.getUserInfoAPI(loginResult.id); //获取用户信息
					this.userInfo = userInfo;
					uni.showToast({
						title: '成功'
					})
				} catch (e) {
					uni.showToast({
						title: '失败'
					})
				} finally {
					uni.hideLoading()
				}

			},
			getJsCode() {
				return new Promise(resolve => {
					uni.login({
						provider: 'weixin',
						success: (loginRes) => {
							resolve(loginRes.code);
						},
						fail: (err) => {
							console.error(err)
						}
					});
				})
			},
			getUserInfo() {
				return new Promise(resolve => {
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							resolve(infoRes.userInfo);
						}
					});
				})
			},
			async formatLoginParams() {
				const js_code = await this.getJsCode();
				const userInfo = await this.getUserInfo();
				const loginParams = {
					appId: 'wxedae7e076c1d990a',
					timestamp: Date.now(),
					version: "1.0",
					sign: "erwlkrjlkwjelrjwlke",
					loginChannel: "1001",
					loginDevice: "10",
					code: js_code,
					...userInfo
				}
				return loginParams;
			},
			loginAPI(loginParams) {
				return new Promise(resolve => {
					uni.request({
						url: getApp().globalData.baseUrl + '/wechat/login',
						method: "POST",
						data: loginParams,
						success: (res) => {
							resolve(res.data);
						}
					})
				})
			},
			async getUserInfoAPI(userId) {
				const [err, res] = await this.$https({
					url: '/wechat/userinfo',
					method: 'POST',
					data: {
						userId: userId
					}
				})
				this.userInfo = res.data.data;
				return res.data.data;
			}
		}
	}
</script>

<style lang="scss">
	.wode__page {
		min-height: 100vh;
		background-color: #F1F1F1;

		.copyright {
			font-size: 12px;
			color: #aaa;
			text-align: center;
			position: absolute;
			bottom: 20px;
			width: 100%;
		}

		.top__group {
			height: 180px;
			padding-top: 20px;
			position: relative;
			background-color: $miva-color-base;

			.avatar__item {
				width: 100px;
				height: 100px;
				margin: 0 auto 20px;
				display: block;
				border-radius: 50%;
			}

			.btn__group {
				text-align: center;
				color: #fff;
			}

			.btn__item {
				padding: 10px 30px;
				line-height: 1;
				display: inline-block;
				border-radius: 30px;
				color: #fff;
				background-color: rgba(#fff, .3);
			}

			.btn__item:last-child {
				// margin-left: 30px;
			}
		}

		.btm__group {
			width: 100vw;
			height: calc(100vw / (750 / 331));
			background-image: url(../../static/wode_item.jpg);
			background-size: cover;
			position: relative;

			.item {
				width: 100vw;
				height: calc(100vw / (750 / 331) / 4);
				position: absolute;
			}

			.item:nth-child(1) {
				top: 10%;
			}

			.item:nth-child(2) {
				top: 38%;
			}

			.item:nth-child(3) {
				top: 75%;
			}
		}
	}
</style>
